<template>
  <div>
    <mt-header title="订单详情" style="background: #fff" class="b">
      <router-link to="/orderlist" slot="left">
        <mt-button icon="back"></mt-button>
        <mt-button @click="handleClose"></mt-button>
      </router-link>
    </mt-header>
    <div class="bgc">
      <div class="xdd">
        <div class="xdd1"></div>
        <span class="xdd2">{{(orderDetail.status_id)=="1"?"新订单":"已取消订单"}}</span>
      </div>
      <div class="lxrxx">
        <h3>联系人信息</h3>
        <h3>{{orderDetail.customer}} {{orderDetail.phone}}</h3>
        <p>{{orderDetail.address}}</p>
      </div>
      <div class="spxx">
        <h3>商品信息</h3>
        <div class="spxx1">
          <img :src="`http://127.0.0.1:3000/${orderDetail.good_pic}`" alt="" width="" />
          <div class="spxx2">
            <h3>{{orderDetail.good_name}}</h3>
            <p>已拆封可正常开机 港行 保修期3-10...</p>
            <a href="#">查看详情</a>
          </div>
        </div>
      </div>
      <div class="ygj">
        <span class="ygj1">预估计</span>
        <span class="ygj2">¥{{orderDetail.money}}</span>
      </div>
      <div class="dd">
        <p>订单状态:{{(orderDetail.status_id)=="1"?"新订单":"取消订单"}}</p>
        <p>订单编号:202101012222254</p>
        <p>2021-04-04 13:03:18</p>
        <p>收款方式:支付宝</p>
        <mt-button type="default" class="button" v-show="orderDetail.status_id==1">取消订单</mt-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.b {
  font-size: 23px;
  color: #000;
}
.bgc {
  border-top: 5px solid #e8e8e8;
  background-color: #e8e8e8;
}
.xdd,
.lxrxx,
.spxx,
.ygj,
.dd {
  margin: 10px 10px 10px 10px;
  background-color: #fff;
  border-radius: 5px;
}
.lxrxx,
.spxx,
.ygj,
.dd {
  padding: 14px 14px;
}
.bgc .xdd {
  padding: 6px;
  margin-top: 0px;
  height: 51px;
  position: relative;
}
.xdd .xdd1 {
  margin-top: 8px;
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url(/img/index/xindd.png) no-repeat;
  background-size: 100px 29px;
  background-position: 10px 1px;
}
.xdd .xdd2 {
  line-height: 51px;
  font-size: 20px;
  position: absolute;
  top: 11%;
  left: 57px;
}
.lxrxx h3 {
  font-weight: 400;
}
.spxx1 {
  padding: 5px;
  display: flex;
}
.spxx2 {
  margin-left: 15px;
}
.spxx2 p {
  margin-top: 7px;
  color: #8e8e8e;
  font-size: 13px;
}
.spxx h4 {
  margin-top: 8px;
}
.spxx h3,
.spxx h3 {
  font-weight: 400;
}
.lxrxx p {
  color: #8e8e8e;
}
.spxx img {
  width: 70px;
  margin: 0;
}
.spxx2 a {
  display: inline-block;
  margin-top: 10px;
  color: #266bff;
}
.ygj {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.ygj .ygj1 {
  margin: 0;
  font-size: 17px;
}
.ygj .ygj2 {
  margin: 0;
  font-size: 18px;
  color: red;
}

.dd p {
  font-size: 15px;
  color: darkgrey;
  margin: 5px;
}
.button {
  position: absolute;
  right: 5px;
  border-radius: 5px;
}
</style>
<script>
export default {
  data() {
    return {
      orderDetail: {},
    };
  },
  props: ["orderid"],
  mounted() {
    this.axios.get(`/order/orderdetail/${this.orderid}`).then(res=>{
        console.log(res.data);
        this.orderDetail = res.data.data[0];
        console.log(this.orderDetail);
    })
  },
};
</script>